<template>
    <el-container class="dashboard-container">
        <el-header class="header">
            <h1>微光社团纳新 Dashboard</h1>
            <div class="avatar-container">
                <el-dropdown>
                    <el-avatar :src="userInfo?.avatar?.path" ro fit="cover"></el-avatar>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="logout">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside>
                <el-menu router>
                  <menu-generator :root="routeRecord"></menu-generator>
                </el-menu>
            </el-aside>
            <el-main style="display: flex;flex-direction: column">
                <el-breadcrumb>
                    <el-breadcrumb-item v-for="(item,idx) in routePath" :key="idx" :to="{name:item.name}" >
                        {{item.meta.title??item.name}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <el-main class="main-container">
                  <router-view />
                </el-main>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { RouterName, routerTree } from "@/router/admin";
import {
    findRouteRecordInArray,
    useLoadingStatus,
    useRouterPath,
} from "@/utils";
import { useRouter } from "vue-router";
import MenuGenerator from "@/components/MenuGenerator.vue";
import { useAdminStore } from "@/store/admin";
import { GetUserInfoAction, LogoutAction } from "@/store/admin/action";
import { ElMessage } from "element-plus";
export default defineComponent({
  components: {MenuGenerator},
  setup() {
        const routeRecord = findRouteRecordInArray(
            RouterName.Dashboard,
            routerTree
        );
        const store = useAdminStore()
        const userInfo = ref(store.state.userInfo)
        if(!userInfo.value || !userInfo.value.avatar|| !userInfo.value.avatar.path) {
            GetUserInfoAction.getInstance().call(store).then((res)=>{
                userInfo.value = res;
            });
        }

        watch(()=>store.state.userInfo,(info)=>{
            if(!info?.avatar)return;
            userInfo.value = info;
        })
        const routerChildren = routeRecord?.children ?? [];
        const router = useRouter();
        const {routePath} = useRouterPath(router.currentRoute,routeRecord)
        const {loadingFunc:logout,loading:logoutLoading} = useLoadingStatus(async function() {
            await LogoutAction.getInstance().call(store)
            ElMessage.success({
                type:"success",
                message:"注销成功"
            })
            router.push({name:RouterName.Login}).then();

        })
        return {
            routerChildren,
            routeRecord,
            routePath,
            userInfo,
            logout,
            logoutLoading
        };
    },
});
</script>

<style lang="scss" scoped>
.dashboard-container {
    min-height: 100vh;
    .header {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
  .main-container{
    margin: 10px 0;
    border-radius: 6px;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.3);
  }
  .avatar-container {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
  }
}
</style>
